<!-- Content Header (Page header) -->
<section class="content-header">
	<h1>SQL解析</h1>
	<ol class="breadcrumb">
		<li><a href="#"><i class="fa fa-dashboard"></i>SQL监控</a></li>
		<li><a href="#"></i>SQL解析</a></li>
	</ol>
</section>
<!-- Main content -->
<section id="container" class="content">
	<div class="row">
		<div class="col-md-12">
			<div class="box box-primary">

				<div class="box-header">
					<form action="" id="query_Form">
						<div class="row">
							<div class="col-xs-3">
								<div class="form-group">
									<label for="ds">数据源:</label> <select name="ds" id="datasource"
										class="form-control" style="width: 200px;">
									</select>
								</div>
							</div>
							<div class="col-xs-8">
								<div class="form-group">
									<label for="sql">sql:</label> <input type="text" name="sql"
										class="form-control" placeholder="sql">
								</div>
							</div>
						</div>
					</form>
				</div>
				<div class="box-footer">
					<div class="form-group">
						<div class="col-lg-offset-5 col-lg-2">
							<button class="btn btn-primary" onclick="queryForm('query_Form')">解析</button>
							<button class="btn btn-primary" onclick="resetBtn('query_Form')">重置</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-12">
			<div class="box box-primary">
				<div class="box-header with-border">
					<h3 class="box-title">解析结果</h3>
				</div>
				<div class="box-body">
					<div>
						<table id="table"></table>
						<div style="text-align: right;">
							<div id="paginator"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	</div>
</section>
<!-- /.content -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="mysqlexplain">SQL解析信息</h4>
			</div>
			<div class="modal-body" id="explainDetail">
				
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$.AdminLTE.boxWidget.activate();
	var dataNodeParam = "";
	var sqlParam = "";
	var Selected_Callback = function(target_select) {
		this.onSuccess = function(data) {
			try {
				var j_obj = data;
				if (j_obj.success) {
					var length = j_obj.rows.length;
					for (var i = 0; i < length; i++) {
						var mycatName = j_obj.rows[i].mycatName;
						$("#" + target_select).append(
								"<option value=\""+ mycatName+"\">" + mycatName
										+ "</option>");
					}
				}
			} catch (e) {
				alert("异常!")
			}
		};
		this.onFail = function(jqXHR, textStatus, errorThrown) {
		};
	};



	var explainMysql12 = function(dataNode, sql) {
		$('#explainDetail').load('./page/sql/sqlparseinfo.html?v=' + Math.random());
		$('#myModal').modal({
			show : true
		});
		dataNodeParam = dataNode;
		sqlParam = sql;
	};

	var initDataSouce = function() {
		var rainbow = new Rainbow();
		rainbow.setService("mycatService");
		rainbow.setMethod("query");
		rainbowAjax.query(rainbow, new Selected_Callback("datasource"));
	};

	$(document)
			.ready(
					function() {

						initDataSouce();
						var cols = [
								{
									title : '操作',
									name : 'operation',
									width : 100,
									align : 'center',
									renderer : function(val, item, rowIndex) {
										//return '<button class="btn btn-danger btn-xs" onclick=explainMysql12("'+item+'")>删除</button>&nbsp;'; 
										return '<button  class="btn btn-primary btn-xs modify"  onclick="explainMysql12(\''
												+ item.DATA_NODE
												+ '\',\''
												+ item.SQL + '\')">解析</button>';
									}
								}, {
									title : 'datanode',
									name : 'DATA_NODE',
									width : 200,
									align : 'left'
								}, {
									title : 'SQL',
									name : 'SQL',
									width : 600,
									align : 'left'
								} ];
				mmgrid = $('#table').mmGrid(
										{
											indexCol : true,
											height : '400',
											indexColWidth : 35,
											cols : cols,
											url : './dispatcherAction/queryByMMGrid.do?service=explainService&method=explainMycat',
											method : 'post',
											root : 'items'
										});
					});
</script>
